<template>
  <div>
    <div class="fly-panel"
         style="margin-bottom: 0;">
      <div class="fly-panel-title fly-filter">
        <a :class="{'layui-this': status ===''&& tag ==='' }"
           @click.prevent="search()">综合</a>
        <span class="fly-mid"></span>
        <a :class="{'layui-this' :status ==='0'}"
           @click.prevent="search(0)">未结</a>
        <span class="fly-mid"></span>
        <a :class="{'layui-this' :status ==='1'}"
           @click.prevent="search(1)">已结</a>
        <span class="fly-mid"></span>
        <a :class="{'layui-this' :status ===''&& tag ==='精华'}"
           @click.prevent="search(2)">精华</a>
        <span class="fly-filter-right layui-hide-xs">
          <a :class="{'layui-this' :sort ==='created' }"
             @click.prevent="search(3)">按最新</a>
          <span class="fly-mid"></span>
          <a :class="{'layui-this' :sort ==='answer' }"
             @click.prevent="search(4)">按热议</a>
        </span>
      </div>
      <fly-listitem :lists="lists"
                    @nextpage="nextPage()"
                    :isEnd="isEnd"></fly-listitem>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/content'
import ListItem from './ListItem.vue'
export default {
  name: 'List',
  components: {
    'fly-listitem': ListItem
  },
  data () {
    return {
      isEnd: false, // 是否最后一页
      isRepeat: false, // 请求锁
      status: '', // 状态量
      tag: '', // 标签->''、精华
      sort: 'created', // 按最新，按热议
      page: 0, // 多少页
      limit: 10, // 每页多少条
      catalog: '', // 查询的分类
      lists: [], // 文章数据
      current: '' // 综合、未结、已结、精华
    }
  },
  watch: {
    current (newval, olval) {
      // console.log('🚀 ~ file: List.vue ~ line 55 ~ current ~ newval', newval)
      // console.log('🚀 ~ file: List.vue ~ line 55 ~ current ~ olval', olval)
      this.init()
    },
    // 取路由分类的数据
    $route (newval, odlval) {
      const catalog = newval.params.catalog
      console.log(newval.params.catalog)
      console.log(odlval.params.catalog)
      if (typeof catalog !== 'undefined' && catalog !== '') {
        this.catalog = catalog
      }
      this.init()
    }
  },
  mounted () {
    // 因为是不同的界面->index和Temple1，所以路由切换导致页面重新挂载，所以这里必须重新请求catalog，否则会出现bug
    // ->具体为点击首页后点击提问后无法获取catalog属性，导致页面依然为首页内容
    const catalog = this.$route.params.catalog
    // console.log('🚀 ~ file: List.vue ~ line 81 ~ mounted ~ catalog', catalog)
    if (typeof catalog !== 'undefined' && catalog !== '') {
      this.catalog = catalog
    }
    this._getList()
  },
  methods: {
    // 更多求解
    nextPage () {
      this.page++
      this._getList()
      // console.log('Click')
    },
    init () {
      this.page = 0
      this.isEnd = false
      this.lists = []
      this._getList()
    },
    // 获取文章列表
    _getList () {
      // 点击下一页之后请求锁锁上。
      if (this.isRepeat) {
        this.$alert('不要重复点击')
        return
      }
      this.isRepeat = true
      const options = {
        catalog: this.catalog,
        isTop: 0,
        page: this.page,
        limit: this.limit,
        sort: this.sort,
        tag: this.tag,
        status: this.status
      }

      getList(options)
        .then((res) => {
          if (res.code === 200) {
            // 是否还有下一页
            if (res.data.length < this.limit) {
              this.isEnd = true
              this.isRepeat = false
            }
            // 页面上是否有数据，是则追加数据
            if (this.lists.length === 0) {
              this.lists = res.data
              this.isRepeat = false
            } else {
              this.lists = this.lists.concat(res.data)
              this.isRepeat = false
            }
          }
        })
        .catch((err) => {
          if (err) {
            this.$alert(err.message)
          }
          console.log(err)
          this.isRepeat = false
        })
    },
    // 点击不同按钮改变状态量
    search (val) {
      // 判断，不去重复触发事件
      if (typeof val === 'undefined' && this.current === '') return
      this.current = val
      console.log(val)
      switch (val) {
        // 未结贴
        case 0:
          this.status = '0'
          this.tag = ''
          break
        // 已结贴
        case 1:
          this.status = '1'
          this.tag = ''
          break
        // 精华贴
        case 2:
          this.status = ''
          this.tag = '精华'
          break
        // 最新
        case 3:
          this.sort = 'created'
          break
        // 热度
        case 4:
          this.sort = 'answer'
          break
        // 综合
        default:
          this.status = ''
          this.tag = ''
          this.current = ''
        // console.log('点击')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  cursor: pointer;
}
</style>
